<template>
  <section class="relative py-16 md:py-24 overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-50 via-purple-50 to-white -z-10"></div>
    <div class="absolute top-0 right-0 w-1/2 h-full bg-blue-100/30 rounded-l-full blur-3xl -z-10"></div>
    <div class="absolute bottom-0 left-0 w-1/3 h-1/2 bg-purple-100/30 rounded-tr-full blur-3xl -z-10"></div>
    
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row items-center">
        <div class="md:w-1/2 mb-10 md:mb-0">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
            数字心桥：用数据与爱，<br>
            <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">连接康复的每一个环节</span>
          </h1>
          <p class="text-lg text-gray-600 mb-8 max-w-lg">
            我们构建了一个连接儿童、家长与康复师的数据与沟通双闭环生态系统，让每一次努力都清晰可见，让每一次成长都有迹可循。
          </p>
          <div class="flex flex-col sm:flex-row gap-4">
            <router-link to="/login" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-8 py-4 rounded-full shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-0.5 text-lg font-medium text-center">
              我是康复师/机构
            </router-link>
            <router-link to="/login" class="bg-white border-2 border-blue-200 hover:border-blue-300 text-blue-700 px-8 py-4 rounded-full shadow-md hover:shadow-lg transition-all transform hover:-translate-y-0.5 text-lg font-medium text-center">
              我是家长
            </router-link>
          </div>
        </div>
        
        <div class="md:w-1/2 relative">
          <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl transform transition-transform hover:scale-[1.02] duration-500">
            <img src="../assets/images/img1.jpg" alt="康复师、家长和孩子在数字心桥上互动的温馨场景" class="w-full h-auto">
          </div>
          <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-200 rounded-full blur-2xl -z-10"></div>
          <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-200 rounded-full blur-2xl -z-10"></div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
// 英雄区域无需额外逻辑
</script>
